<template>
  <div class="echarts-container">
    <!-- 各分组年龄分布情况---饼图 -->
    <div class="chart-container" style="width: 100%">
      <div class="chart-title">
        <Histogram style="width: 18px; height: 18px" />
        <span>各分组年龄分布情况</span>
      </div>
      <div ref="setChartRef" class="chart"></div>
    </div>
  </div>
</template>
<script setup>
import { numWithArea } from '@/api/trial/trial';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const routerQuery = ref({});
routerQuery.value = route.query;

let setChartRef = ref(null);
let chartInstance = null;
const props = defineProps({
  sendTrialVal: {
    type: Object,
    default: {},
  },
});
import china from './china.json';
const initChart = () => {
  numWithArea(props.sendTrialVal.id).then(res => {
    const DATA = res.data.data;
    echarts.registerMap('china', china);
    chartInstance = echarts.init(setChartRef.value);
    var outname = Object.keys(DATA);
    var outvalue = Object.values(DATA);
    var outdata = outname.map((item, index) => {
      return {
        name: item,
        value: outvalue[index],
      };
    });
    var maxValue = Math.max(
      ...outdata.map(item => {
        return item.value;
      })
    );
    let option = {
      tooltip: {
        show: true,
        formatter: function (params) {
          return (
            '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
          );
        },
      },

      visualMap: {
        type: 'continuous',
        text: ['', ''],
        showLabel: true,
        left: '0',
        min: 0,
        max: maxValue,
        itemWidth: 10, //图形的宽度，即长条的宽度
        itemHeight: 80, //图形的高度，即长条的高度。
        seriesIndex: [0],
        inRange: {
          color: ['#cedbfc', '#adc4fd', '#8dadfe', '#6c95fe', '#4b7eff'],
        },

        outOfRange: {
          color: ['#999999'],
        },
        splitNumber: 0,
      },
      geo: {
        map: 'china',
        show: true,
        aspectScale: 0.75,
        // layoutCenter: ['50%', '50%'], // 地图中心点位置
        // layoutSize: '75%', // 地图尺寸（百分比或像素值）
        zoom: 1.2,
        roam: false,
        label: {
          emphasis: {
            show: false,
          },
        },
      },
      series: [
        {
          type: 'map',
          map: 'china',
          aspectScale: 0.75,
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              color: 'black',
              fontWeight: 500,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',
              borderWidth: 1,
            },
            emphasis: {
              areaColor: '#867BFF',
            },
          },
          emphasis: {
            itemStyle: {
              areaColor: null,
              borderWidth: 3,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
          animation: false,
          data: outdata,
        },
      ],
    };
    chartInstance.setOption(option);
  });
};

onMounted(() => {
  nextTick(() => {
    initChart();
    // 添加窗口resize监听
    window.addEventListener('resize', () => {
      chartInstance?.resize(); // 直接调用 resize
    });
  });
});
// 组件卸载时清理
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose(); // 清理 chartInstance
  }
  window.removeEventListener('resize', () => {
    chartInstance?.resize(); // 移除事件监听
  });
});
</script>
<style scoped>
.echarts-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart-container {
  width: 50%;
  height: 550px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart-title {
  width: 100%;
  height: 30px;
  font-size: 18px;
  color: black;
  display: flex;
  align-items: center;
}
.chart {
  width: 100%;
  height: 95%;
}
</style>